<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block的应用</title>
<style>
body{margin:0; text-decoration:none;}
a{text-decoration:none}
.pages{background:#fefaec; width:300px; height:40px; margin:100px auto; padding:20px 40px}
.pages a{background:#fcffff; color:#5e6362; line-height:26px; padding:0px 8px;border:1px solid #FCC; display:inline-block}
{}
.pages a:hover{border-color:blue}
.pages .active{font-weight:bold;background:#FCC}
.pages .active:hover{color:#5e6362; border-color:#FCC; cursor:text}
</style>
</head>

<body>
  <div class="pages">  
    <a href="#">上一页</a>
    <a href="#">1</a>
    <a class="active" href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">下一页</a>
  </div> 
</body>
</html>
